/*
  学习目标：使用PureComponent 自动决定是否更新
  PureComponent内部自动实现了shouldComponentUpdate, 会自动比较,决定是否更新
*/

import React from 'react';
export default class App extends React.Component {
  state = {
    count: 0,
    msg: 'hello React',
    name: 'zs',
  };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  handleClickMsg = () => {
    this.setState({ msg: this.state.msg + '~' });
  };
  handleClickName = () => {
    this.setState({ name: this.state.name + '!' });
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <button onClick={this.handleClick}>点我修改数量</button>

        <h1>msg： {this.state.msg}</h1>
        <button onClick={this.handleClickMsg}>点我修改msg</button>

        <h1>name {this.state.name}</h1>
        <button onClick={this.handleClickName}>点我修改name</button>

        <Footer msg={this.state.msg} count={this.state.count}></Footer>
      </div>
    );
  }
}

class Footer extends React.PureComponent {
  // 更新中
  render() {
    console.log('我被更新过了  ----->  ');
    return (
      <div>
        我是Footer, 我要接收count : {this.props.count} - {this.props.msg}
      </div>
    );
  }

  // 更新后
  componentDidUpdate() {
    console.log('componentDidUpdate 更新完毕  ----->  ');
  }
}
